<template>
    <div class="cardBox">
        <el-row :gutter="22" class="w100">
            <el-col :span="24">
                <el-button v-if="!editShow&&!gaojiBtnShow" type="primary" style="margin:20px 0;" @click="gaojiSetClick(1,'高级设置')">高级设置</el-button>
            </el-col>
            <el-col :span="4" v-for="(item,index) in cardListData" class="cardCol" :key="item">
                <div class="cardDesc">
                    <p class="cardtitle">
                        <el-tooltip class="box-item" effect="light" :content="item.title" placement="right">
                            <span style="white-space:nowrap;width: 98%;
    text-overflow: ellipsis;
    overflow: hidden;">{{item.title}}</span>
                        </el-tooltip>
                        <span>
                            <svg-icon class="hover" @click="listRemove(item,index)" class-name="search-icon"
                                icon-class="tubiaoneiguanbi" />
                        </span>
                    </p>
                    <p class="cardBtn">
                        <el-button style="background-color: rgba(121, 72, 234, 1);color: #fff;" size="small"
                            v-if="item.status == 'A' || item.place == '-'">组合值</el-button>
                        <el-button type="primary" size="small" v-else>值</el-button>
                        <span>正常</span>
                        <el-button v-if="editShow" type="text" @click="gaojiSetClick(2,'因子信息编辑')">编辑</el-button>
                    </p>
                    <div class="cardLR">
                        <p v-for="itemobj in item.objarr">
                            <span class="leftdesc">{{ itemobj.left }}</span>
                            <span class="rightdesc">{{itemobj.right}}</span>
                        </p>
                    </div>
                </div>
            </el-col>
        </el-row>
        <teleport to="body">
            <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="660" :height="auto"
                v-model="state.addModal" resize :mask="true">
                <template #title>
                    <div class="w100 h100 fsc mask_title">{{state.modalTitle}}</div>
                </template>
                <template #default>
                    <yinzimask v-if="state.maskType ==1" :biaodaList="biaodaList" :listAnalog="listAnalog" :cardList="cardList"
                        @expressionList="expressionList">
                    </yinzimask>
                    <div style="padding: 10px;width: 100%;" v-if="state.maskType ==2">
                        <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
                            <el-row :gutter="24" class="w100">
                                <el-col :span="8">
                                    <el-form-item label="设备名称" prop="place">
                                        <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="测点编号" prop="deviceName">
                                        <el-select clearable filterable v-model="state.formData.deviceName"
                                            placeholder="请选择" @change="stationModelChange">
                                            <el-option v-for="item in state.stationmodelList" :key="item.name"
                                                :label="item.name" :value="item.name">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="地点安装" prop="place">
                                        <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="报警模式" prop="deviceName">
                                        <el-select clearable filterable v-model="state.formData.deviceName"
                                            placeholder="请选择" @change="stationModelChange">
                                            <el-option v-for="item in state.stationmodelList" :key="item.name"
                                                :label="item.name" :value="item.name">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="上限报警值" prop="place">
                                        <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="上限解报值" prop="place">
                                        <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="下限报警值" prop="place">
                                        <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="下限解报值" prop="place">
                                        <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="持续时间(s)" prop="place">
                                        <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div class="footer-form" style="text-align:right;">
                            <el-button>取消</el-button>
                            <el-button type="primary">
                                确定
                            </el-button>
                        </div>
                    </div>
                </template>
            </vxe-modal>
        </teleport>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import yinzimask from "./yinzimask";
    import _ from 'lodash'
import { ElMessage } from 'element-plus';
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        cardList: {
            type: Array,
            default: () => {
                return []
            }
        },
        listAnalog: {
            type: Array,
            default: () => {
                return []
            }
        },
        editShow: {
            type: Boolean,
            default: () => false 
        },
        gaojiBtnShow: {//是否显示高级设置按钮
            type: Boolean,
            default: () => false 
        },
        biaodaList: {
            type: Array,
            default: () => {
                return [{
                        name: '加',
                        sub: '+'
                    }, {
                        name: '减',
                        sub: '-'
                    }, {
                        name: '乘',
                        sub: '*'
                    }, {
                        name: '除',
                        sub: '/'
                    }, {
                        name: '左括号',
                        sub: '('
                    }, {
                        name: '右括号',
                        sub: ')'
                    }, {
                        name: '与',
                        sub: '&&'
                    }, {
                        name: '或',
                        sub: '||'
                    }, {
                        name: '等于',
                        sub: '=='
                    }, {
                        name: '大于',
                        sub: '>'
                    }, {
                        name: '大于等于',
                        sub: '>='
                    },
                    {
                        name: '小于',
                        sub: '<'
                    }, {
                        name: '小于等于',
                        sub: '<='
                    }, {
                        name: '撤',
                        sub: '销'
                    }, {
                        name: '清',
                        sub: '空'
                    }
                ]
            }
        },
    })
    const emits = defineEmits()
    // 重点
    const state = reactive({
        addModal: false,
        modalTitle: '高级设置',
        formData: {},
        rules: {},
        maskType: 1
    })

    function expressionList(list, status) {
        console.log("组合报警",list, status);
        if (!status) {
            state.addModal = status
            if (list) {
                props.cardList.push(list)
            }
        }

    }
    const cardListData = computed(() => {
        return _.uniqBy(props.cardList)
    })
    const biaodaList = computed(() => {
        return _.uniqBy(props.biaodaList)
    })

    function gaojiSetClick(type, title) {
        if(props.cardList.length > 0){
            state.maskType = type
            state.modalTitle = title
            state.addModal = true
        }else{
            ElMessage.warning('请选择因子')
        }
    }

    function listRemove(item,index) {
        props.cardList.splice(index, 1)
        emits('cardListremove',item)
        
    }
</script>
<style lang="scss" scoped>
    p {
        margin: 0;
    }

    .cardBox {
        padding: 0 20px 0;

        .cardCol {
            margin-bottom: 10px;
        }

        .cardDesc {
            border-radius: 4px;
            background: rgba(249, 249, 250, 1);
            border: 1px solid rgba(235, 235, 235, 1);
            padding: 0 12px 16px;

            .cardtitle {
                color: rgba(53, 140, 240, 1);
                font-size: 14px;
                font-weight: 500;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid rgba(229, 229, 229, 1);
                padding: 9px 0;
            }

            .cardBtn {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 9px 0;

                span {
                    color: rgba(103, 194, 58, 1);
                    font-size: 12px;
                }
            }

            .cardLR {
                p {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    padding: 4px 0;

                    span {
                        &.leftdesc {
                            min-width: 24px;
                            margin-right: 10px;
                            white-space: nowrap;
                        }

                        &.rightdesc {
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }
                }
            }

        }
    }
</style>